<template>
  <div style="width: 500px;" @keyup.enter="reguser">

    <label for="username">请输入用户名</label>
    <i class="el-icon-circle-check" v-if="username_i"></i>
      <el-popover placement="right" title="" width="200" trigger="hover" :content="username_tips">
        <el-input slot="reference" placeholder="请输入内容" v-model="username" clearable id="username"></el-input>
      </el-popover>

    <label for="password">请输入密码
    <i class="el-icon-circle-check" v-if="password_i"></i>
      <el-popover placement="right" title="" width="200" trigger="hover" :content="password_tips">
        <el-input slot="reference" placeholder="请输入密码" v-model="password" show-password id="password"></el-input>
      </el-popover>
    </label>

    <label for="confirmPassword">请再次输入密码
    <i class="el-icon-circle-check" v-if="confirmPassword_i"></i>
      <el-popover placement="right" title="" width="200" trigger="hover" :content="confirmPassword_tips">
        <el-input slot="reference" placeholder="请输入密码" v-model="confirmPassword" show-password id="confirmPassword"></el-input>
      </el-popover>
    </label>

    <label for="email">请输入您的电子邮箱
    <i class="el-icon-circle-check" v-if="email_i"></i>
      <el-popover placement="right" title="" width="200" trigger="hover" :content="email_tips">
        <el-input slot="reference" placeholder="请输入内容" v-model="email" clearable id="email"></el-input>
      </el-popover>
    </label>

    <el-button type="primary" @click ="reguser">注册</el-button>
  </div>
</template>

<script>
export default {

  data(){
    return {
      username : '',
      password : '',
      confirmPassword: '',
      email : '',

      username_tips:'用户名应该在1~10位之内',
      password_tips:'密码应该为6~18位数字、字母和特殊符号的组合',
      confirmPassword_tips:'您两次输入的密码不一致',
      email_tips:'您的邮箱将作为您找回密码的唯一依据',

      username_i : false,
      password_i : false,
      confirmPassword_i : false,
      email_i : false,

    }
  },

  methods: {
    async reguser(){
      if(this.password === this.confirmPassword){
        var res = await this.$http.post('/api/reguser',{
          username : this.username,
          password: this.confirmPassword,
          email : this.email,},)
      }
      
      if(res.data.status === 0){

        this.$message({
          message: '注册成功 ！！！',
          type: 'success'});
      }
      else{
        this.$message.error('服务器繁忙，请稍后重试！');
      }
    }
  },

  watch:{
    async username(){
      const res = await this.$http.post('/api/checkUsername',{
       username : this.username
      },)

      this.username_tips = res.data.message
      if(this.username === '')
        this.username_tips = '用户名应该在1~10位之内'
      else if(res.data.status === 0)
        this.username_i = true
      else
        this.username_i = false
    },

    password(){
      if(this.password.length >= 6 && this.password.length <=18)
        this.password_i = true
      else
        this.password_i = false
    },

    confirmPassword(){
      if(this.confirmPassword === this.password)
        this.confirmPassword_i = true
      else
        this.confirmPassword_i = false
    },

    email(){
      const str = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
        if(str.test(this.email))
          this.email_i = true
        else
          this.email_i = false

    },
  }
}
</script>

<style>
i{
  color:forestgreen;
  font-size: 25px;
}
</style>